import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { UserWaterfallMock } from './mock'
import UserCard from '../../Card/UserCard'
import { SearchService } from '../../../transfer/service/SearchService'

interface IUserWaterfallProps {
    searchValue: string
}

export default function UserWaterfall(props: IUserWaterfallProps) {
    const [userWaterfall, setUserWaterfall] = useRecoilState(UserWaterfallMock)
    const [itemWidth, setItemWidth] = useState<any>()
    const [width, setWidth] = useState<any>()
    const [isNull, setIsNull] = useState<boolean>()

    // 初始化数据
    useEffect(() => {
        let temp: any = []
        new SearchService().get('users', props.searchValue, 0, 20).then(res => {
            setUserWaterfall(res.data.data)
            res.data.data.length != 0 ? setIsNull(true) : setIsNull(false)
        })
    }, [])

    // 初始化布局
    useEffect(() => {
        $(`.${style.container}`).outerWidth(true)! > 1050 ? setWidth('70%') : setWidth('100%')
    }, [])

    useEffect(() => {
        setItemWidth(($(`.${style.container}`).width()! - 50) / 3 + 'px')
    }, [$(`.${style.container}`).outerWidth(true)!])

    return (
        <div
            className={style.container}
            style={{
                ['--width-' as any]: width
            }}>
            {userWaterfall.map((item, index) => {
                return <UserCard key={index} data={item} width={itemWidth} minHeight={'3.65rem'} maxHeight={'5.6rem'} />
            })}
        </div>
    )
}
